<template>
  <div>
    <table border cellspacing="0">
      <tr>
        <th>
          <input type="checkbox" v-model="isAll">
        </th>
        <th>商品名称</th>
        <th>商品品牌</th>
        <th>数量</th>
        <th>单价</th>
        <th>创建时间</th>
        <th>操作</th>
      </tr>
      <tr v-for="(item,index) in list" :key="index">
        <td>
          <input type="checkbox" v-model="item.isChecked">
        </td>
        <td>{{ item.name }}</td>
        <td>{{ item.brand }}</td>
        <td>{{ item.num | formateUnit('个')}}</td>
        <td>{{ item.price | formateUnit('元')}}</td>
        <!-- <td>{{item.time  ? item.time : '' | formateDate}}</td> -->
        <td>
          <span v-if="item.time"> {{ item.time | formateDate}}</span>
          <span v-else>暂无数据</span>
        </td>
        <td><button @click="del(index)">删除</button></td>
      </tr>
      <tr>
        <td colspan="4">总价{{ totalPrice }}</td>
        <td colspan="3">均价{{ avgPrice }}</td>
      </tr>
    </table>
    <p>总计 {{ selectPrice }}</p>
    <hr>
    <h1>新增</h1>
    商品名称:
    <input type="text" v-model.trim="form.name">
    <br>
    商品品牌:
    <input type="text" v-model.trim="form.brand">
    <br>
    数量:
    <input type="text" v-model.number="form.num">
    <br>
    价格：
    <input type="text" v-model.number="form.price">
    <br>
    <button @click="add">添加商品</button>
  </div>
</template>

<script>
import dayjs from 'dayjs'
export default {
  data(){
    return {
      form:{
        name:'',
        brand:'',
        num:'',
        price:'',
      },
      list: [{
        name: '面膜',
        brand: 'sk-II',
        num: 10,
        price: 50,
        isChecked: false
      }, {
        name: '唇膏',
        brand: 'dior',
        num: 3,
        price: 220,
        isChecked: false
      }, {
        name: '小面包',
        brand: '达利园',
        num: 100,
        price: 5,
        isChecked: false
      }, {
        name: '果汁',
        brand: 'coco',
        num: 10,
        price: 15,
        isChecked: false
      }, {
        name: '口香糖',
        brand: '益达',
        num: 2,
        price: 15,
        isChecked: false
      }]
    }
  },
  filters:{
    formateDate:(time)=>{
      // if (time){
      //   return dayjs(time).format('YYYY/MM/DD')
      // } else {
      //   return '暂无数据'
      // }
      return dayjs(time).format('YYYY/MM/DD')
    
    },
    // formateUnit: (item)=>{
    //   let str = item + '个'
    //   return str
    // },
    // formateUnit2: (val) =>{
    //   let str1 = val + '元'
    //   return str1
    // }
    formateUnit: (item, unit)=>{
      let str = item + unit
      return str
    },

  },
  computed:{
    isAll: {
      get(){
        return this.list.every(obj => obj.isChecked)
      },
      set(val){
        this.list.forEach(obj => obj.isChecked = val)
      }
    },
    totalPrice(){
      return this.list.reduce((sum, obj) => sum + obj.num * obj.price, 0)
    },
    avgPrice(){
      let totalNum = this.list.reduce((sum, obj) => sum + obj.num, 0)
      return (this.totalPrice / totalNum).toFixed(2)
    },
    selectPrice() {
      // 方式1
      // return this.list.filter(obj => obj.isChecked).reduce((sum, obj)=> sum +  obj.num * obj.price, 0)
      // 方式2
      return this.list.reduce((sum, obj)=> {
        return obj.isChecked ? sum + obj.num * obj.price : sum
      }, 0)
    }
  },
  methods:{
    del(index){
      this.list.splice(index,1)
    },
    add(){
      if(this.form.name!=='' && this.form.brand!==''  && this.form.num!==0 && this.form.price !== 0){
        let obj = {
          // name:this.form.name,
          // brand:this.form.brand,
          // num:this.form.num,
          // price:this.form.price,
          ...this.form,
          time:new Date()
        }
        this.list.unshift(obj)
      }else{
       alert('请重新输入') 
      }
      this.form ={
        name:'',
        brand:'',
        num:'',
        price:'',
      }
    }
  }
}
</script>

<style>

</style>